<template>
    <section v-loading="loading" class="page-pd com-list">
        <div class="org-department">
            <div class="title">
                <span class="line"></span>
                <span>内设机构</span>
            </div>
            <div class="department">
                <draggable v-model="departments" @update="onDragEnd" :options="{ animation: 200 }">
                    <el-tag v-for="department in departments" class="m-b-20"
                            :key="department.id"
                            closable @close="handleClose(department)" @click.native="handleDepartmentClick(department)">
                        {{department.name}}
                    </el-tag>
                </draggable>
                <el-button v-if="!isDistrict" type="primary" size="medium" class="w-100" icon="el-icon-plus" @click="showAdd">添加</el-button>
            </div>
            <department-opt v-if="optVisible" :orgId="orgId" :orgLabel="orgTag" :optVisible.sync="optVisible" :department="department" @update="updateData"></department-opt>
            <div class="button-region">
                <el-button size="small" class="button form-button cancel" @click="back">返回</el-button>
                <el-button type="primary" size="small" class="button form-button confirm" @click="save">保存</el-button>
            </div>
        </div>
    </section>
</template>
<script>
    import departmentOpt from './departmentOpt.vue';
    import draggable from 'vuedraggable';
    export default {
        props: {
            orgId: String,
            orgTag: Number,
            isDistrict: {
                type: Boolean,
                default: false
            }
        },
        data () {
            return {
                departments: [],
                department: {},
                optVisible: false,
                loading: false
            }
        },
        mounted () {
            this.updateData();
        },
        methods: {
            back () {
                this.$emit('on-back');
            },
            onDragEnd (e) {
            },
            updateData () {
                this.fetchDepartments(this.orgId);
            },
            fetchDepartments (id) {
                const { orgTag } = this;
                this.loading = true;
                this.$x.get(`/orginfo/department?groupId=${id}&orgLabel=${orgTag}`).then(({ data = [] }) => {
                    this.departments = data;
                }).finally(t => this.loading = false);
            },
            onNodeClick ({ id }) {
                this.orgId = id;
                this.fetchDepartments(id);
            },
            showAdd () {
                this.department = {};
                this.optVisible = true;
            },
            handleClose ({ id }) {
                this.$x.confirm('确定删除该机构吗？', '删除机构', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'error',
                    customClass: 'delMsg w-400'
                }).then(() => {
                    this.loading = true;
                    this.$x.delete(`/orginfo/department/${id}`).then(({ success = true }) => {
                        if (success) {
                            this.$x.toast.success('删除成功！');
                            this.fetchDepartments(this.orgId);
                        } else {
                            this.$x.alert('该机构内已经存在人员，不能删除！', '删除机构', {
                                confirmButtonText: '确定',
                                type: 'error',
                                customClass: 'delMsg w-400'
                            });
                        }
                    }).finally(() => {
                        this.loading = false;
                    });
                });
            },
            handleDepartmentClick (department) {
                this.department = department;
                this.optVisible = true;
            },
            save () {
                const { orgId, orgTag, departments } = this;
                const ids = departments.map(department => department.id).join(',');
                const params = {
                    ids,
                    groupId: orgId,
                    orgLabel: orgTag
                };

                this.loading = true;
                this.$x.put('/orginfo/department', params).then(() => {
                    this.$x.toast.success('保存成功！');
                }).finally(() => {
                    this.loading = false;
                });
            }
        },
        watch: {
            orgId: function (newVal, oldVal) {
                this.updateData();
            }
        },
        components: { draggable, departmentOpt }
    }
</script>
<style scoped lang="scss">
    .title {
        font-size: .14rem;
        border-bottom: 1px solid #eaeaea;
        margin-bottom: .2rem;
        padding: .3rem .4rem .2rem;
        .line {
            display: inline-block;
            height: .14rem;
            border-left: 2px solid #ed4040;
            padding-right: 5px;
            vertical-align: middle;
            margin-top: -2px;
        }
    }

    .type {
        padding: 0 .4rem;
    }

    .button-region {
        position: fixed;
        left: 2.1rem;
        right: 0;
        bottom: 0;
        height: 76px;
        padding: 20px 0;
        border-top: 1px solid #eaeaea;
        background: #fff;
        display: flex;
        justify-content: center;
        z-index: 11;

        button {
            width: 128px;

            &:first-of-type {
                margin-right: 20px;
            }
        }
    }

    /deep/ {
        .search {
            padding: 15px 20px;
        }

        .tree-head {
            line-height: 60px;
            font-size: 14px;
            padding-left: 20px;
            border-bottom: 1px solid #EAEAEA;
        }

        .department {
            >div {
                display: inline-block;
                vertical-align: bottom;
            }
        }
        .el-tag {
            width: auto;
        }

        .el-tag, .el-button {
            vertical-align: bottom;
        }

        .el-tag--small {
            height: .36rem;
            line-height: .36rem;
            margin-right: .3rem;
            padding: 0 .16rem;
            background: #ffffff;
            border: 1px dashed #ddd;
            cursor: pointer;
            /deep/ .el-tag__close {
                color: #959698;
            }
        }
    }
</style>
